<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas时钟</title>
    <style>
      #clock {
        border: 2px solid #f2f2f2;
      }
    </style>
  </head>

  <body>
    <canvas id="clock" width="800" height="800"></canvas>
    <script>
      var colock = document.getElementById("clock");
      var cxt = clock.getContext("2d");
      cxt.scale(1.5, 1.5); //将画布放大，

      function drawClock() {
        //清除画布
        cxt.clearRect(0, 0, 500, 500);

        var now = new Date();
        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hour = now.getHours();
        // 小时必须获取浮点类型（小时+分钟转化成的小时）
        hour = hour + min / 60;
        // 将24小时转换为12小时
        hour = hour > 12 ? hour - 12 : hour;

        //表盘 蓝色
        cxt.lineWidth = 5;
        cxt.strokeStyle = "blue";
        cxt.beginPath();
        cxt.arc(250, 250, 200, 0, 360, false);
        cxt.closePath();
        cxt.stroke();
        // 刻度
        // 时刻度
        for (var i = 0; i < 12; i++) {
          cxt.save();
          // 设置时钟的粗细
          cxt.lineWidth = 5;
          // 设置时钟的颜色
          cxt.strokeStyle = "#000";
          // 先设置0,0点
          cxt.translate(250, 250);
          // 设置旋转角度
          cxt.rotate((i * 30 * Math.PI) / 180);
          cxt.beginPath();
          // 设置起点位置
          cxt.moveTo(0, -180);
          // 设置移动方式
          cxt.lineTo(0, -190);
          cxt.closePath();

          cxt.stroke();
          cxt.restore();
        }
        // 分刻度
        for (var i = 0; i < 60; i++) {
          cxt.save();
          cxt.lineWidth = 2;
          cxt.strokeStyle = "#000";
          cxt.translate(250, 250);
          cxt.rotate((i * 6 * Math.PI) / 180);

          cxt.beginPath();
          cxt.moveTo(0, -185);
          cxt.lineTo(0, -190);
          cxt.closePath();

          cxt.stroke();
          cxt.restore();
        }

        // 时针
        // 设置时钟风格
        cxt.save();
        cxt.lineWidth = 1;
        cxt.strokeStyle = "#000";
        cxt.fillStyle = "#000";
        cxt.translate(250, 250);
        cxt.rotate((hour * 30 * Math.PI) / 180);
        cxt.beginPath();
        cxt.moveTo(0, -80);
        cxt.lineTo(-4, 10);
        cxt.lineTo(4, 10);
        cxt.fill();
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
        // 分针
        cxt.save();
        cxt.lineWidth = 1;
        cxt.strokeStyle = "green";
        cxt.fillStyle = "green";
        cxt.translate(250, 250);
        cxt.rotate((min * 6 * Math.PI) / 180);
        cxt.beginPath();
        cxt.moveTo(0, -120);
        cxt.lineTo(-3, 20);
        cxt.lineTo(3, 20);
        cxt.closePath();
        cxt.fill();
        cxt.stroke();
        cxt.restore();
        // 秒针
        cxt.save();
        cxt.strokeStyle = "red";
        cxt.lineWidth = 0.3;
        cxt.fillStyle = "red";
        cxt.translate(250, 250);
        cxt.rotate((sec * 6 * Math.PI) / 180);
        cxt.beginPath();
        cxt.moveTo(0, -160);
        cxt.lineTo(-2, 30);
        cxt.lineTo(2, 30);
        cxt.closePath();
        cxt.fill();
        cxt.stroke();
        // 画交叉点
        cxt.beginPath();
        cxt.arc(0, 0, 5, 0, 360, false);
        cxt.closePath();
        cxt.fillStyle = "#fff";
        cxt.fill();
        cxt.stroke();

        cxt.beginPath();
        cxt.arc(0, -100, 12, 0, 360, false);
        cxt.closePath();
        cxt.fillStyle = "#fff";
        cxt.fill();
        cxt.stroke();

        cxt.restore();

        for (var i = 1; i <= 12; i++) {
          cxt.save();
          cxt.font = "36px Arial";
          cxt.fillStyle = "#000";
          cxt.textAlign = "center";
          cxt.textBaseline = "middle";
          // 先设置0,0点
          cxt.translate(250, 250);
          // 设置旋转角度
          var x = Math.sin((i * 30 * Math.PI) / 180) * 150;
          var y = -Math.cos((i * 30 * Math.PI) / 180) * 150;
          cxt.fillText(i, x, y);

          // cxt.rotate(i * 30 * Math.PI / 180);
          // cxt.fillText(i, 0, -150);
          cxt.restore();
        }

        // 使用setInterval()让时钟动起来
      }
      setInterval(drawClock, 1000);
    </script>
  </body>
</html>
